<template>
  <div>
    <!-- 导航栏 -->
    <van-nav-bar
      left-text="返回"
      left-arrow
      @click-left="$router.go(-1)"
      class="login_navbar"
      title="黑马头条"
    />
    <!-- form表单 -->
    <van-form @submit="onSubmit" ref="loginForm">
      <!--  -->
      <van-field
        v-model="userInfo.mobile"
        name="mobile"
        placeholder="请输入手机号"
        type="number"
        maxlength="11"
        :rules="loginRules.mobile"
      >
      <i slot="left-icon" class="toutiao toutiao-shouji"></i>
    </van-field>
    <!--  -->
      <van-field
        v-model="userInfo.code"
        type="text"
        name="code"
        placeholder="请输入验证码"
        :rules="loginRules.code"
      >
      <i slot="left-icon" class="toutiao toutiao-yanzhengma"></i>
      <!-- 发送验证码 -->
      <template #button>
        <!-- 倒计时 -->
        <van-count-down v-if="countdown" :time="2000" format="ss秒后重试" @finish="countDownEnd"/>
        <!-- 发送验证码按钮 -->
        <van-button v-else size="small" round type="default" class="bg" native-type="button"
        @click="sendMsg"
        >发送验证码</van-button>
      </template>
      </van-field>
      <!-- 登录按钮 -->
      <div style="margin: 16px;">
        <van-button  block type="primary" native-type="submit" class="login_btn">
          登录
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { login, sendM } from '@/api/user/user.js'
export default {
  // 给组件起一个名字
  name: 'login',
  data () {
    return {
      /// 用户信息
      userInfo: {
        mobile: '18911111111',
        code: '246810'
      },
      // 用户登录的数据验证
      loginRules: {
        mobile: [{
          required: true,
          message: '手机号码为必填项!'
        }, {
          pattern: /^1[3|5|7|8]\d{9}$/,
          message: '手机格式错误!'
        }],
        code: [{
          required: true,
          message: '请输入验证码!'
        }, {
          pattern: /^\d{6}$/,
          message: '验证码格式错误!'
        }]
      },
      // 倒计时的flag
      countdown: false
    }
  },

  created () {

  },

  methods: {
    // 提交的登陆表单函数
    async onSubmit () {
      this.$toast.loading({
        message: '登录中...',
        duration: 0, // 持续展示
        forbidClick: true // 使屏幕不能被点击了,就是加一个透明的遮罩层
      })
      // 发起登录
      try {
        const res = await login(this.userInfo)
        console.log(res)
        if (res.status === 201) {
          // 将用户token存到vuex中
          this.$store.commit('setToken', res.data.data)
          this.$router.push('/my')
          return this.$toast.success('登录成功')
        }
      } catch (err) {
        if (err.response.status === 400) return this.$toast.fail('登录失败!')
        return this.$toast.fail('登录失败!')
      }
    },

    // 点击发送验证码,验证手机号是否有效,再发送验证码
    async sendMsg () {
      try {
        // validate返回一个promise对象,需要使用async await将异步代码
        await this.$refs.loginForm.validate('mobile')
      } catch (err) {
        return false
      }
      // 验证通过就触发倒计时和发送验证码功能
      this.countdown = true
      try {
        // 发验证码
        await sendM(this.userInfo.mobile)
      } catch (err) {
        if (err.response.status === 429) return this.$toast.fail('亲,操作太频繁了,稍后重试!')
        return this.$toast.fail('网络开小差了~~~')
      }
    },
    // 倒计时结束时触发的函数
    countDownEnd () {
      this.countdown = false
    }
  }
}
</script>

<style scoped lang='less'>
.toutiao {
  font-size: 38px;
}
.remember-me {
  font-size: 25px;
  ::v-deep .van-checkbox__icon {
    width: 15px;
    height: 15px;
  }
}
</style>
